<template>
    <div class="bgf">
        <el-tabs v-model="reviewStatus" >
            <el-tab-pane label="开屏页设置" name="1"></el-tab-pane>
            <el-tab-pane label="线上Banner" name="4"></el-tab-pane>
            <!-- <el-tab-pane label="线下Banner" name="5"></el-tab-pane> -->
            <!-- <el-tab-pane label="线上广告位" name="2"></el-tab-pane>
            <el-tab-pane label="线下广告位" name="3"></el-tab-pane> -->
        </el-tabs>

        <div v-show="reviewStatus=='4'||reviewStatus=='5'" class="manage1">
            <div class="from">
                <el-form  :inline="true" class="demo-form-inline">
                    <el-form-item v-show="reviewStatus=='4'" label="创建时间：">
                        <el-date-picker v-model="param2.startTime" type="date" class="w206" placeholder="开始时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/> &nbsp; 至 &nbsp;
                        <el-date-picker v-model="param2.endTime" type="date" class="w206" placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item>

                    <!-- <el-form-item v-show="reviewStatus=='5'" label="创建时间：">
                        <el-date-picker v-model="param3.startTime" type="date" class="w206" placeholder="开始时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/> &nbsp; 至 &nbsp;
                        <el-date-picker v-model="param3.endTime" type="date" class="w206" placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item> -->
                    <br/>

                    <el-form-item>
                        <el-button type="primary" class="w115 " @click="getList()">搜索</el-button>
                        &emsp;
                        <el-button @click="rewrite" text type="primary" >
                            <el-icon :size="16"><refresh /></el-icon> &nbsp;重置筛选条件
                        </el-button>
                    </el-form-item>
                </el-form>
                
            </div>
            &emsp; <el-button type="primary" class="w115 " @click="openAdd" >添加banner</el-button>

        </div>
    </div>

    <div v-show="reviewStatus=='1'" class="bgf padd20 reviewStatus1">
        <el-form :model="form1" label-width="auto"  >
            <el-form-item label="开屏页设置：" >
                <div class="col9e lh32  font12">
                    点击可添加开屏页，开屏页尺寸比例9:16
                </div>
                <el-upload
                    :headers="{ token: $store.state.token }"
                    :action = globalUrl 
                    :before-upload="beforeAvatarUpload"
                    :on-success="(val)=>uploadSuccess(val,'img')"
                    class="avatar-uploader"
                    :show-file-list="false"
                    name="files"
                >
                    <img v-if="form1.img" :src="form1.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item label="链接类型：">
                <el-select v-model="form1.linkType" placeholder="请选择" class="w145">
                    <el-option label="不跳转" :value="1" />
                    <el-option label="外链" :value="2" />
                    <el-option label="商品" :value="3" />
                </el-select>
            </el-form-item>

            <el-form-item v-show="form1.linkType!=1 " label="跳转链接：" prop="goodsName">
                <el-input v-model="form1.linkUrl" placeholder="请输入商品ID或者链接地址" class="w336" />
            </el-form-item>
            <el-form-item label=" " >
                <el-button @click="submit(form1)" type="primary" class="w115">保存</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div v-show="reviewStatus=='2'" class="bgf " v-loading="loading" >
        <el-table ref="selectTable" :data="list2" >
            <el-table-column fixed label="广告图片" show-overflow-tooltip min-width="120">
                <template #default="scope">
                    <el-image :src="scope.row.img" fit="cover" style="width:96px;height:60px" />
                </template>
            </el-table-column>

            <el-table-column min-width="100" label="位置" prop="position" ></el-table-column>

            <el-table-column min-width="80" label="链接类型"  >
                <template #default="scope">
                    {{ linkType[scope.row.linkType]}}
                </template>
            </el-table-column>

            <el-table-column prop="linkUrl" min-width="160" label="跳转链接" show-overflow-tooltip ></el-table-column>

            <el-table-column fixed="right" label="操作" width="80" >
                <template #default="scope">
                    <el-button @click="editAd(scope.row)" text type="primary">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div v-show="reviewStatus=='3'" class="bgf " v-loading="loading" >
        <el-table ref="selectTable" :data="list3" >
            <el-table-column fixed label="广告图片" show-overflow-tooltip min-width="120">
                <template #default="scope">
                    <el-image :src="scope.row.img" fit="cover" style="width:96px;height:60px" />
                </template>
            </el-table-column>

            <el-table-column min-width="100" label="位置" prop="position" ></el-table-column>

            <el-table-column min-width="80" label="链接类型"  >
                <template #default="scope">
                    {{ linkType[scope.row.linkType]}}
                </template>
            </el-table-column>

            <el-table-column prop="linkUrl" min-width="160" label="跳转链接" show-overflow-tooltip ></el-table-column>

            <el-table-column fixed="right" label="操作" width="80" >
                <template #default="scope">
                    <el-button @click="editAd(scope.row)" text type="primary">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div v-show="reviewStatus=='4'" class="bgf mart20" v-loading="loading" >
        <el-table ref="selectTable" :data="list4" >
            <el-table-column fixed label="海报图片" show-overflow-tooltip min-width="120">
                <template #default="scope">
                    <el-image :src="scope.row.img" fit="cover" style="width:96px;height:60px" />
                </template>
            </el-table-column>

            <el-table-column prop="sort" min-width="80" label="排序" ></el-table-column>

            <el-table-column min-width="100" label="位置类型"  >
                <template #default="scope">
                    {{ type[scope.row.type]}}
                </template>
            </el-table-column>

            <el-table-column min-width="80" label="链接类型"  >
                <template #default="scope">
                    {{ linkType[scope.row.linkType]}}
                </template>
            </el-table-column>

            <el-table-column prop="linkUrl" min-width="160" label="跳转链接" show-overflow-tooltip ></el-table-column>

            <el-table-column prop="createTime" min-width="160" label="创建时间" ></el-table-column>

            <el-table-column fixed="right" label="操作" width="120" >
                <template #default="scope">
                    <el-button @click="editBanner(scope.row)" text type="primary">修改</el-button>
                    <el-divider direction="vertical" />
                    <el-button  @click="delBanner(scope.row.bannerId)" text type="primary">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="h70 pad20 flexab ">
            <p class="font10 cola4">共 {{total4}} 条</p>
            <el-pagination
                v-model:currentPage="param2.pageNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="param2.pageSize"
                layout=" sizes, prev , jumper , next"
                :total="total4">
            </el-pagination>
        </div>
    </div>

    <div v-show="reviewStatus=='5'" class="bgf mart20" v-loading="loading" >
        <el-table ref="selectTable" :data="list5" >
            <el-table-column fixed label="海报图片" min-width="120">
                <template #default="scope">
                    <el-image :src="scope.row.img" fit="cover" style="width:96px;height:60px" />
                </template>
            </el-table-column>

            <el-table-column prop="sort" min-width="80" label="排序" show-overflow-tooltip ></el-table-column>

            <el-table-column min-width="80" label="链接类型" show-overflow-tooltip >
                <template #default="scope">
                    {{ {'-1':'不跳转', 1:'外链', 2:'内链'}[scope.row.linkType]}}
                </template>
            </el-table-column>

            <el-table-column prop="linkUrl" min-width="160" label="跳转链接" show-overflow-tooltip ></el-table-column>

            <el-table-column prop="createTime" min-width="160" label="创建时间" ></el-table-column>

            <el-table-column fixed="right" label="操作" width="160" >
                <template #default="scope">
                    <el-button @click="editBanner(scope.row)" text type="primary">修改</el-button>
                    <el-divider direction="vertical" />
                    <el-button  @click="delBanner(scope.row.bannerId)" text type="primary">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="h70 pad20 flexab ">
            <p class="font10 cola4">共 {{total5}} 条</p>
            <el-pagination
                v-model:currentPage="param3.pageNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="param3.pageSize"
                layout=" sizes, prev , jumper , next"
                :total="total5">
            </el-pagination>
        </div>
    </div>

    <el-dialog v-model="onlineShow" :title=" form.bannerId?'修改线上banner':'添加线上banner' " width="647px">
        <el-form :model="form" class="demo-form-inline" label-width="110px"  >
            <el-form-item label="banner海报：" >
                <el-upload
                    :headers="{ token: $store.state.token }"
                    :action = globalUrl
                    :before-upload="beforeAvatarUpload"
                    :on-success="(val)=>uploadSuccess(val,'img')"
                    class="avatar-uploader"
                    :show-file-list="false"
                    name="files"
                >
                    <img v-if="form.img" :src="form.img" class="avatar" style="width:100px;height:100px" />
                    <el-icon v-else class="avatar-uploader-icon" style="width:100px;height:100px" ><Plus /></el-icon>
                </el-upload>
                <div class="col9e lh20 padt10 font12">
                    支持 .jpg, .gif, .png, .bmp 格式，单个图片不超过 10 MB。建议尺寸为：800*800
                </div>
            </el-form-item>

            <el-form-item label="排序：">
                <el-input v-model="form.sort" placeholder="请输入排序" class="w145"> </el-input>
            </el-form-item>

            <el-form-item label="位置类型：">
                <el-select v-model="form.type" placeholder="请选择" class="w145">
                    <el-option label="首页banner" :value="1" />
                    <el-option label="秒杀banner" :value="2" />
                    <el-option label="拼团banner" :value="3" />
                    <el-option label="积分商城" :value="4" />
                </el-select>
            </el-form-item>

            <el-form-item label="链接类型：">
                <el-select v-model="form.linkType" placeholder="请选择" class="w145">
                    <el-option label="不跳转" :value="0" />
                    <el-option label="外链" :value="1" />
                    <el-option label="商品" :value="2" />
                </el-select>
            </el-form-item>

            <el-form-item v-show=" form.linkType!=0 " label="跳转链接：" prop="goodsName">
                <el-input v-model="form.linkUrl" placeholder="请输入商品ID或者链接地址" class="w336" />
            </el-form-item>
        </el-form>
             
        <template #footer>
            <div >
                <el-button @click="onlineShow = false" >取消</el-button>
                <el-button type="primary" @click="onlineEditSub" >确定</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="underlineShow" :title=" form.bannerId?'修改线下banner':'添加线下banner' " width="647px"  >
        <el-form :model="form" class="demo-form-inline" label-width="110px"  >
            <el-form-item label="banner海报：" >
                <el-upload
                    :headers="{ token: $store.state.token }"
                    :action = globalUrl 
                    :before-upload="beforeAvatarUpload"
                    :on-success="(val)=>uploadSuccess(val,'photo')"
                    class="avatar-uploader"
                    :show-file-list="false"
                    name="files"
                >
                    <img v-if="form.photo" :src="form.photo" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
                <div class="col9e lh20 padt10 font12">
                    支持 .jpg, .gif, .png, .bmp 格式，单个图片不超过 10 MB。建议尺寸为：690*240
                </div>
            </el-form-item>

            <el-form-item label="排序：">
                <el-input v-model="form.sort" placeholder="请输入排序" class="w145"> </el-input>
            </el-form-item>

            <el-form-item label="运营城市：">
                <el-cascader v-model="cascader" :props="props" :options="options" separator=" " @change="handleChange" :placeholder="cityName" :class=" cityName=='请选择'?'':'place' " />
            </el-form-item>

            <el-form-item label="链接类型：">
                <el-select v-model="form.linkType" placeholder="请选择" class="w145">
                    <el-option label="不跳转" :value="-1" />
                    <el-option label="外链" :value="1" />
                    <el-option label="内链" :value="2" />
                </el-select>
            </el-form-item>

            <el-form-item v-show=" form.linkType!=-1 " label="跳转链接：" prop="goodsName">
                <el-input v-model="form.linkPath" placeholder="请输入套餐ID或者链接地址" class="w336" />
            </el-form-item>
        </el-form>
             
        <template #footer>
            <div >
                <el-button @click="underlineShow = false" >取消</el-button>
                <el-button type="primary" @click="underlineEditSub" >确定</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="adShow" title="修改广告位" width="647px"  >
        <el-form :model="form" class="demo-form-inline" label-width="110px"  >
            <el-form-item label="banner海报：" >
                <el-upload
                    :headers="{ token: $store.state.token }"
                    :action = globalUrl 
                    :before-upload="beforeAvatarUpload"
                    :on-success="(val)=>uploadSuccess(val,'img')"
                    class="avatar-uploader"
                    :show-file-list="false"
                    name="files"
                >
                    <img v-if="form.img" :src="form.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
                <div class="col9e lh20 padt10 font12">
                    支持 .jpg, .gif, .png, .bmp 格式，单个图片不超过 10 MB。建议尺寸为：690*240
                </div>
            </el-form-item>

            <el-form-item label="位置">
                {{form.position || '--'}}
            </el-form-item>

            <el-form-item label="链接类型：">
                <el-select v-model="form.linkType" placeholder="请选择" class="w145">
                    <el-option label="不跳转" :value="0" />
                    <el-option label="外链" :value="1" />
                    <el-option label="商品" :value="2" />
                </el-select>
            </el-form-item>

            <el-form-item v-show=" form.linkType!=0 " label="跳转链接：" prop="goodsName">
                <el-input v-model="form.linkUrl" placeholder="请输入商品ID或者链接地址" class="w336" />
            </el-form-item>
        </el-form>
             
        <template #footer>
            <div >
                <el-button @click="adShow = false" >取消</el-button>
                <el-button type="primary" @click="adEditSub" >确定</el-button>
            </div>
        </template>
    </el-dialog>

    <p></p>
</template>
<script>
import  areadata from '@/js/city.js'
export default {
    data(){
        return{
            // 1电商首页banner 2秒杀3拼团4积分商城'
            type: { 1: '首页banner', 2: '秒杀banner', 3: '拼团banner', 4: '积分商城' },
            linkType: { 0: '不跳转', 1: '外链', 2: '商品' },
            reviewStatus:'1',
            onlineShow: false,
            underlineShow: false,
            adShow: false, 
            globalUrl: '/api/system/upload/uploadList',
            param2:{
                pageNumber:1,
                pageSize: 10,
            },
            loading: false,
            form:{},
            form1:{
                linkUrl:''
            },
            list2:[],
            list3:[],
            list4:[],
            total4:0,

            param3:{
                pageNumber:1,
                pageSize: 10,
            },
            list5:[],
            total5:0,
            cascader:[],
            cityName: '请选择',
            options:areadata,
            props:{
                value: 'id',
                children: 'cities',
                label: 'name',
            }
        }
    },
    mounted(){
        this.getList('4');
        // this.getList('3');
        this.getAd(1);
        this.getAd(2);
        this.getAd(3);
    },
    methods:{

        submit(val){
            console.log(val,'val');
            let that = this;
            that.$api.advertiseUpdate(val).then(res=>{
                console.log(res);
                if(res){
                    that.$message.success(res.message)
                }
            })
        },

        async getAd(type){
            let that = this;
            let obj = {
                pageNumber: 1,
                pageSize : 10,
                type: type
            };
            let res = await that.$api.advertiseList(obj);
            console.log('res',res,type);
            if(res){
                // that.$message.success(res.message)
                that['form'+type] = res
                // if(type==1){
                //     console.log('type==1',res)
                //     if(res.records.length>0){
                //         that['form'+type] = res.records[0]
                //     }
                // }else{
                //     that['list'+type] = res.records||res
                // }
            }
        },

        async adEditSub(){
            let that = this;
            console.log(that.form,'this.form=====');
            // return;
            let res = await that.$api.advertiseUpdate(this.form);
             
            console.log(res);
            if(res){
                that.adShow = false;
                if(that.reviewStatus!='1'){
                    that.getAd(that.reviewStatus)
                }
            }
        },

        editAd(val){
            let that = this;

            that.form = JSON.parse( JSON.stringify(val) );
            // delete that.form.createTime;
            that.adShow = true;
        },

        delBanner(id){
            this.$msgbox.confirm(
                "banner图删除请谨慎操作，删除后将无法恢复，确定删除？",
                "删除banner图",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                }
            ).then(async() => {
                let that = this;
                // return;
                let res;

                if(that.reviewStatus=='4'){
                    res = await that.$api.bannerDelete({bannerId:id});
                }else if(that.reviewStatus=='5'){
                    res = await that.$api.deleteLocalLifeBanner({bannerId:id});
                }
                console.log(res);
                if(res){
                    that.getList(that.reviewStatus);
                    that.$message.success('删除成功');
                }
                
            }).catch(() => {});
        },

        handleChange(val){
            console.log(val)
            if(val){
                this.form.cityId = val[1];
            }
        },

        editBanner(val){
            let that = this;
            console.log(val)

            if(that.reviewStatus=='4'){
                that.form = JSON.parse( JSON.stringify(val) );
                delete that.form.createTime;
                that.onlineShow = true;
            }else if(that.reviewStatus=='5'){
                // that.form = JSON.parse( JSON.stringify(val) );
                this.cascader = [];
                that.form = {
                    cityId : val.cityId,
                    linkPath : val.linkUrl,
                    linkType : val.linkType,
                    photo : val.img,
                    sort : val.sort,
                    bannerId : val.bannerId,
                },
                that.cityName = val.cityName;
                that.underlineShow = true;
            }
        },

        // 提交--添加/编辑线上banner
        async onlineEditSub(){
            let that = this;
            console.log(that.form,'this.form=====');

            // return;
            let res;
            if(this.form.bannerId){
                res = await that.$api.bannerUpdate(this.form);
            }else{
                res = await that.$api.bannerUpdate(this.form);
            }
            console.log(res);
            if(res){
                that.onlineShow = false;
                that.getList('4')
            }
        },

        // 提交--添加/编辑线下banner
        async underlineEditSub(){
            let that = this;
            console.log(that.form,'this.form=====');

            // return;
            let res;
            if(this.form.bannerId){
                res = await that.$api.updateLocalLifeBanner(this.form);
                that.cityName = '请选择';
            }else{
                res = await that.$api.addLocalLifeBanner(this.form);
            }
            console.log(res);
            if(res){
                that.underlineShow = false;
                that.getList('3')
            }
        },

        openAdd(){
            this.form = {};
            this.fileList = [];
            if(this.reviewStatus=='4'){
                this.onlineShow = true;
            }else if(this.reviewStatus=='5'){
                this.underlineShow = true;
                this.cascader = [];
            }
        },

        async getList(reviewStatus){
            // console.log('00000000')
            let that = this;
            let res;
            if(reviewStatus=='4'){
                that.loading = true;

                console.log(that.param2,'this.param2=====')
                res = await that.$api.bannerList(that.param2);
                console.log(res);
                if(res){
                    that.list4 = res.records;
                    that.total4 = res.total;
                }
            }else if(reviewStatus=='5'){
                that.loading = true;

                console.log(that.param3,'this.param3=====')
                res = await that.$api.getLocalLifeBannerList(that.param3);
                console.log(res);
                if(res){
                    that.list5 = res.records;
                    that.total5 = res.total;
                }
            }
            that.loading = false;
        },

        // 重置
        rewrite(){
            let that = this;
            let obj = {
                pageNumber: that.param.pageNumber,
                pageSize: that.param.pageSize,
            }
            that.param = obj;
        },

         //图片上传成功
        uploadSuccess(val,key){
            // console.log(val,key)
            this.loading = false;
            if(val.status==200){
                let img = this.utils.Decrypt(val.data);
                console.log(img);
                if(this.reviewStatus=='1'){
                    this.form1[key] = img.path
                }else{
                    this.form[key] = img.path
                }
            }
        },
       
        beforeAvatarUpload(file){
            console.log('000000')
            const isLt = file.size / 1024 / 1024 < 3

            if (!isLt) {
                this.$message.warning('选择图片过大，请重新上传！');
            }
            return isLt 
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            if(this.reviewStatus=='4'){
                this.param2.pageSize = val;
            }else if(this.reviewStatus=='5'){
                this.param3.pageSize = val;
            }
            this.getList(this.reviewStatus);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // this.param.pageNumber = val;
            if(this.reviewStatus=='4'){
                this.param2.pageNumber = val;
            }else if(this.reviewStatus=='5'){
                this.param3.pageNumber = val;
            }
            this.getList(this.reviewStatus);
        },
      
    }
}
</script>
<style lang="scss" scoped>
.manage1{
    padding: 25px 20px;
    .from{
        background: #F2F3F5;
        padding: 24px 16px 4px;
        margin-bottom: 20px;
    }
}
.reviewStatus1{
    .avatar {
        width: 90px;
        height: 160px;
        object-fit: cover;
    }
    .el-icon.avatar-uploader-icon {
        width: 90px;
        height: 160px;
    }
}
.avatar {
    width: 120px;
    height: 80px;
    object-fit: cover;
}
.el-icon.avatar-uploader-icon {
    width: 120px;
    height: 80px;
}
// :deep .el-upload-list--picture-card .el-upload-list__item {
//     width: 80px;
//     height: 80px;
// }
// :deep .el-upload--picture-card{
//     width: 80px;
//     height: 80px;
// }
:deep .place input::placeholder{
    color: #606266;
}
</style>